<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>图书管理</title>
    <style type="text/css">
      .grid {
        margin: auto;
        width: 530px;
        text-align: center;
      }
      .grid table {
        border-top: 1px solid #517117;
        width: 100%;
        border-collapse: collapse;
      }
      .grid th,
      td {
        padding: 10;
        border: 1px dashed goldenrod;
        height: 35px;
        line-height: 35px;
      }
      .grid th {
        background-color: goldenrod;
      }
      .grid .book {
        padding-bottom: 10px;
        padding-top: 5px;
        background-color: goldenrod;
      }
      .grid .total {
        height: 30px;
        line-height: 30px;
        background-color: goldenrod;
        border-top: 1px solid #517117;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="grid">
        <div>
          <h1>图书管理</h1>
          <div class="book">
            <div>
              <label for="id"> 编号： </label>
              <input type="text" v-focus :disabled="iptBool" />
              <label for="name"> 名称： </label>
              <input type="text" v-model="bookname" />
              <button @click="handle" :disabled="bnameIpt">提交</button>
            </div>
          </div>
        </div>
        <div class="total">
          <span>图书总数：</span>
          <!-- 0.39： 图书数量 -->
          <span>{{total}}</span>
        </div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>名称</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- 0.33： 渲染图书列表 -->
            <tr v-for="item in books">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <!-- 0.37: 调用格式化时间 -->
              <td>{{item.date |format}}</td>
              <td>
                <a href="javascript:;">修改</a>
                <span>|</span>
                <a href="javascript:;">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <script type="text/javascript">
      // 0.34:id 输入框自动获取焦点
      Vue.directive('focus', {
        inserted: function (el) {
          el.focus();
        },
      });
      // 0.35：格式化日期时间 - 补0函数
      function Zero(newDate) {
        return newDate <= 10 ? '0' + newDate : newDate;
      }
      // 0.36：格式化日期时间
      Vue.filter('format', function (val) {
        val = new Date();
        // console.log(val);
        var y = val.getFullYear();
        Zero(y);
        var M = val.getMonth() + 1;
        Zero(M);
        var d = val.getDate();
        Zero(d);
        var h = val.getHours();
        Zero(h);
        var m = val.getMinutes();
        Zero(m);
        var s = val.getSeconds();
        Zero(s);
        return y + '/' + M + '/' + d + ' - ' + h + ':' + m + ':' + s;
      });
      // 0： 设置请求根路径
      axios.defaults.baseURL = 'http://localhost:3000/';
      // 0.1：响应拦截器，将请求到的res数据，转换为data
      axios.interceptors.response.use(
        function (res) {
          return res.data;
        },
        function (error) {
          console.log(error);
        }
      );
      // 0.2：创建vue实例
      var vm = new Vue({
        el: '#app',
        data: {
          books: [], // 0.3存储books数据
          bookname: '',
          iptBool: true, // 1.1禁用ID输入框
          bnameIpt: false, // 2.1：图书名是否已经存在
        },
        methods: {
          // 1:添加图书，通过post将书名发送到服务器，完成添加，如果状态码是200就重新getBooks渲染页面，并清空输入框
          handle: async function () {
            var res = await axios.post('books', {
              name: this.bookname,
            });
            if (res.status == 200) {
              this.getBooks();
              this.bookname = '';
            }
          },
          // 0.31： 封装函数，请求books数据
          getBooks: async function () {
            this.books = await axios.get('books');
            // console.log(this.books);转换前Promise { <state>: "pending" }
            // console.log(this.books);转换后Array(6) [ {…}, {…}, {…}, {…}, {…}, {…} ]
          },
        },
        mounted() {
          //0.32: 调用函数，拿到数据
          this.getBooks();
        },
        // 0.38: 计算图书总数
        computed: {
          total: function () {
            return this.books.length;
          },
        },
        // 2.1： 监听图书名是否已经存在
        watch: {
          bookname: async function (val) {
            var res = await axios.get('/books/book/' + this.bookname);
            // console.log(res);
            if (res.status == 1) {
              this.bnameIpt = true;
            } else {
              this.bnameIpt = false;
            }
          },
        },
      });
    </script>
  </body>
</html>
